/* eslint-disable */
<template>
  <div class="app-container">
    <el-row>
      <el-col :span="6" class="tl-left-tree">
        <!-- 树 -->
        <el-input v-model="queryTreeParam.qry_name" placeholder="请输入名称" @keyup.enter.native="filterTree" ref="treeSearch">
          <el-button current-node-key="" slot="append" icon="el-icon-search" @click="filterTree"></el-button>
        </el-input>
        <!-- <el-scrollbar ref="treeScroll" :style="{ height: 400 + 'px' }" resizable-key="treeHeight" :resizable-reduce="20" :resizable-refs="['treeSearch']"> -->
        <el-scrollbar ref="treeScroll" :style="{ height: treeHeight + 'px' }" resizable-key="treeHeight" :resizable-reduce="20" :resizable-refs="['treeSearch']">
          <el-tree class="tl-tree" ref="tree" :data="treeData" node-key="id" :default-expand-all="true" highlight-current :expand-on-click-node="false" @node-click="doTreeQuery" :filter-node-method="filterTreeNode">
            <span class="custom-tree-node" slot-scope="{ node }">
              <el-tooltip class="item" effect="dark" :content="node.label" placement="top-start" v-if="node.label.length > 10">
                <span class="item-container">
                  <span>{{ node.label | ellipsis(10) }} </span>
                </span>
              </el-tooltip>
              <span class="item-container" v-else>
                <span>{{ node.label }} </span>
              </span>
            </span>
          </el-tree>
        </el-scrollbar>
      </el-col>
      <el-col :span="18">
        <el-switch v-show="showSwitch" class="switch" v-model="choseValue" active-text="鱼骨图" inactive-text="九宫格"> </el-switch>
        <!-- <el-scrollbar style="height:650px"> -->
        <fish-bone v-if="showFish" v-show="showFish1" ref="fishBone" :key="'index' + fishKey" :model="model" :showTitle="true" :showTooltip1="true"></fish-bone>
        <div class="chart-container">
          <chart :dataList="dataList" :userRoles="userRoles" ref="chart" v-if="showChart" v-show="showChart1"></chart>
        </div>
        <!-- </el-scrollbar> -->
      </el-col>
    </el-row>
  </div>
</template>
<script>
/** mixins */
import { mixin_tree_list } from '@tapui/mixins/mixin_tree_list'
/** 子组件 */
import { TreeQueryMode } from '@tapui/const/tapConst'
import chart from '../mpmProjectSquared/chart'
import fishBone from '@/components/fishBone/fishBone.vue'
/** 工具类 */
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
export default {
  name: 'cboApprovalFlowIns',
  mixins: [mixin_tree_list],
  components: { chart, fishBone },
  data() {
    return {
      urlPrefix: '/mpm/projectTask/',
      url: {
        queryChart: '/mpm/projectSquared/querySquaredInfo',
        queryFishBone: '/mpm/projectFishFirst/queryFishInfo'
      },
      treeQueryKey: 'qry_taskid',
      sorterInfo: {
        // 排序参数
        sidx: 'id',
        sord: 'desc'
      },
      fishKey: 0,
      showChart: false,
      showFish: false,
      dataList: [],
      userRoles: [],
      queryTreeParam: {
        qry_projectcode: this.projectinfo.projectcode
      },
      model: {
        id: ''
      },
      // 默认鱼骨图
      choseValue: true
    }
  },
  props: {
    projectinfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  filters: {
    ellipsis: function(value, len) {
      if (!value) return ''
      if (value.length > len) {
        return value.slice(0, len) + '...'
      }
      return value
    }
  },
  computed: {
    showSwitch() {
      if (this.showChart && this.showFish) {
        return true
      } else {
        return false
      }
    },
    showFish1() {
      // eslint-disable-next-line
      return this.showSwitch ? (this.choseValue ? true : false) : true
    },
    showChart1() {
      // eslint-disable-next-line
      return this.showSwitch ? (this.choseValue ? false : true) : true
    }
  },
  methods: {
    // 查询并初始化
    queryFishBone(taskid) {
      if (!taskid) {
        return false
      }
      this.showFish = false
      getAction(this.url.queryFishBone, { taskid: taskid }).then((res) => {
        if (res.success) {
          this.fishKey = this.fishKey + 1
          if (res.result.fishbone && res.result.fishbone.length > 0) {
            this.showFish = true
            this.fishBoneData = this.fishAdapter(res.result.fishbone)
            this.$nextTick(() => {
              this.$refs.fishBone.initFishBone(this.fishBoneData)
            })
          }
        } else {
          this.$tap.alert('鱼骨图数据查询失败，请联系管理员!', 'warning')
        }
      })
    },
    // 组件数据适配
    fishAdapter(data) {
      if (!data) {
        return
      }
      // 二级数据适配
      for (let item of data) {
        item.fontColor = ''
        item.lineColor = ''
        item.link = ''
        item.fid = '1'
        item.name = item.clientdept
        if (item.children) {
          // 三级适配
          for (let itemSon of item.children) {
            itemSon.fontColor = ''
            itemSon.lineColor = ''
            itemSon.link = ''
            itemSon.children = []
            itemSon.name = itemSon.post
            itemSon.id = itemSon.id + 'a'
          }
        }
      }
      let newData = [
        {
          children: data,
          id: '1',
          fid: '0',
          name: '任务目标',
          fontColor: '',
          lineColor: '',
          link: ''
        }
      ]
      return newData
    },
    doTreeQuery(treeNode) {
      // 重置鱼九选择
      this.choseValue = true
      if (treeNode.pid === '-1' || treeNode.pid === '0') {
        this.closeLoading()
        return false
      }
      let taskid = treeNode.id
      this.model.id = taskid
      this.queryFishBone(taskid)
      // 获取九宫格
      this.showChart = false
      getAction(this.url.queryChart, { taskid: taskid }).then((res) => {
        if (res.success) {
          if (res.result && res.result.datalist.length > 0) {
            this.dataList = res.result.datalist
            this.userRoles = res.result.userrole.split(',')
            this.showChart = true
            this.$nextTick(() => {
              this.$refs.chart.init()
            })
          }
        } else {
          this.$tap.alert('九宫格数据查询失败，请联系管理员!', 'warning')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.chart-container {
  padding-left: 100px;
  margin-top: 50px;
}
/deep/ .el-scrollbar__thumb {
  display: none !important;
}
.switch {
  margin-left: 80px;
}
</style>
